<template>
  <div>
    <nav>
      <div>
        <a-tree
          v-model:expandedKeys="nodeCacheStore.expandedKeys"
          v-model:selectedKeys="nodeCacheStore.selectedKeys"
          :tree-data="nodeCacheStore.treeData"
          show-icon
          block-node
          draggable
          @expand="onExpand"
          @select="onSelect"
        >
          <!-- <template #icon="{ key }">
            <icon-font v-if="!!getFileIcon(key)" :type="getFileIcon(key)" />
          </template> -->
          <template #title="{ title, key }">
            <a-row type="flex" @mouseenter="onMenuMouseenter(key)" @mouseleave="onMenuMouseleave(key)">
              <a-col flex="auto">{{ title }}</a-col>
              <hover-menu-dropdown :node-key="key" :hover-node-key="hoverNodeKey" />
            </a-row>
          </template>
        </a-tree>
      </div>
    </nav>
  </div>
</template>

<script setup lang="ts">
import { DataNode } from 'ant-design-vue/es/tree';
import HoverMenuDropdown from './hover-menu-dropdown/hover-menu-dropdown.vue';
import { useNodeTreeCacheStore } from '@/plugins/pinia/store/node-tree-cache';
import { EventDataNode, Key } from 'ant-design-vue/es/vc-tree/interface';

const nodeCacheStore = useNodeTreeCacheStore();

// 鼠标悬停的节点 Key
const hoverNodeKey = ref<string>('');
// 鼠标进入节点事件
const onMenuMouseenter = (menuKey: string) => {
  hoverNodeKey.value = menuKey;
};
// 鼠标离开节点事件
const onMenuMouseleave = (menuKey: string) => {
  if (hoverNodeKey.value == menuKey) {
    hoverNodeKey.value = '';
  }
};

const onExpand = (_: Array<Key>, info: { node: EventDataNode; expanded: boolean }) => {
  nodeCacheStore.expandNode(info);
};
const onSelect = (
  _: Array<Key>,
  info: {
    event: 'select';
    selected: boolean;
    node: EventDataNode;
    selectedNodes: DataNode[];
    nativeEvent: MouseEvent;
  },
) => {
  if (info.selected) {
    nodeCacheStore.selectNode(info.node);
  }
};
</script>
